<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1317px"
      height="801px"
      :modal="false"
      custom-class="gkdetails"
    >
      <div class="content">
        <div class="gkhead">
          <div class="lx">类型</div>
          <el-select class="gkselect" v-model="lxvalue" @change="changegktable">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-table
          :data="zzfdata"
          v-if="zzftableshow"
          height="340px"
          style="width:96%"
          class="gktable"
          @row-click="flytobuild"
        >
          <el-table-column prop="xzqh" label="行政区划" >
          </el-table-column>
          <el-table-column prop="dz" label="地址" >
          </el-table-column>
          <el-table-column prop="mph" label="门牌号" >
          </el-table-column>
          <el-table-column prop="fwsx" label="房屋属性" >
          </el-table-column>
          <el-table-column prop="rzrs" label="入住人数" >
          </el-table-column>
          <el-table-column prop="lxdh" label="联系电话" >
          </el-table-column>
          <el-table-column prop="lghcs" label="楼高和层数">
          </el-table-column>
        </el-table>
        <el-table
          :data="shdata"
          v-if="shtableshow"
          height="340px"
          class="gktable"
          @row-click="flytobuild"
        >
          <el-table-column prop="shmc" label="商户名称" width="150">
          </el-table-column>
          <el-table-column prop="tyshxydm" label="统一社会性用代码" width="150">
          </el-table-column>
          <el-table-column prop="zzjgdm" label="组织机构代码" width="120">
          </el-table-column>
          <el-table-column prop="gszch" label="工商注册号" width="100">
          </el-table-column>
          <el-table-column prop="djjg" label="登记机关" width="80">
          </el-table-column>
          <el-table-column prop="shdz" label="商户地址" width="80">
          </el-table-column>
          <el-table-column prop="qylx" label="企业类型" width="80">
          </el-table-column>
          <el-table-column prop="sshy" label="所属行业" width="80">
          </el-table-column>
          <el-table-column prop="clrq" label="成立日期" width="80">
          </el-table-column>
          <el-table-column prop="jyz" label="经营者" width="70">
          </el-table-column>
          <el-table-column prop="jyzdh" label="经营者电话" width="100">
          </el-table-column>
          <el-table-column prop="yyzzjyfw" label="营业执照经营范围" width="120">
          </el-table-column>
        </el-table>
        <el-table
          :data="zdcsdata"
          v-if="zdcstableshow"
          height="340px"
          style="width:96%"
          class="gktable"
          @row-click="flytobuild"
        >
          <el-table-column prop="csmc" label="商户名称">
          </el-table-column>
          <el-table-column prop="tyshxydm" label="统一社会性用代码">
          </el-table-column>
          <el-table-column prop="zczb" label="注册资本">
          </el-table-column>
          <el-table-column prop="dz" label="地址">
          </el-table-column>
          <el-table-column prop="fddbr" label="法定代表人">
          </el-table-column>
          <el-table-column prop="lxr" label="联系人">
          </el-table-column>
          <el-table-column prop="lxfs" label="联系方式">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getzzflist, getshlist, getzdcslist } from "../../utils/api";
export default {
  name: "gkdetails",
  data() {
    return {
      dialogVisible: false,
      title: "概况总览",
      options: [
        {
          value: "自住房",
          label: "自住房",
        },
        {
          value: "商户",
          label: "商户",
        },
        {
          value: "企业",
          label: "企业",
        },
        {
          value: "租住房",
          label: "租住房",
        },
        {
          value: "重点场所",
          label: "重点场所",
        },
      ],
      lxvalue: "自住房",
      zzftableshow: true,
      zzfdata: [],
      shtableshow: false,
      shdata: [],
      zdcstableshow: false,
      zdcsdata: [],
      lastbuildid: "",
    };
  },
  mounted() {
    window.gkdetailsInit = this.getData;
  },
  methods: {
    getData() {
      this.dialogVisible = true;
      getzzflist().then((res) => {
        if (res.data.code === 200) {
          this.zzfdata = res.data.data;
        }
      });
    },
    changegktable(e) {
      this.zzftableshow = false;
      this.shtableshow = false;
      this.zdcstableshow = false;
      if (e == "商户") {
        this.shtableshow = true;
        getshlist().then((res) => {
          if (res.data.code === 200) {
            this.shdata = res.data.data;
          }
        });
      }
      if (e == "自住房") {
        this.zzftableshow = true;
        getzzflist().then((res) => {
          if (res.data.code === 200) {
            this.zzfdata = res.data.data;
          }
        });
      }
      if (e == "重点场所") {
        this.zdcstableshow = true;
        getzdcslist().then((res) => {
          if (res.data.code === 200) {
            this.zdcsdata = res.data.data;
          }
        });
      }
    },
    flytobuild(row, column, event) {
      if (this.lastbuildid) {
        var entity = window.Viewer.entities.getById(this.lastbuildid);
        entity.polygon.material = Cesium.Color.GHOSTWHITE.withAlpha(0);
      }
      this.lastbuildid = row.gridid;
      var buildentity = window.Viewer.entities.getById(row.gridid);
      buildentity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5);
      window.Viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(buildentity.lon, buildentity.lat, 200)
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
.el-table {
  background: unset;
  margin-top: 5px;
  margin: auto;
}
.content {
  width: 100%;
  height: 400px;
}
.gkhead {
  display: flex;
  margin-left: 50px;
}
.lx {
  color: white;
  font-size: 16px;
  padding-right: 20px;
  margin-top: 5px;
}
.gkselect {
  width: 10%;
}
</style>
<style>
.gkselect .el-input--suffix .el-input__inner {
  background-color: rgba(37, 121, 92, 0.5) !important;
  border: 1px solid #03f3fc !important;
  color: white !important;
}
</style>
